<template>
  <div>
    <van-cell class="content">
          <div class="flex-between font-14 line-height-3">
            <div class="col-333333 font-bold-500 font-16 m-r-10 flex"><p :style="{background:colors}" class="fangK"></p>{{title}}</div>
            <van-button v-if="aadFlag" icon="plus" plain color="#37B5B5" class="addbtn" type="primary" @click="addItem">新增</van-button>
            <div v-if="moreShow" class="col-999999 font-14 m-r-10 flex align-items" @click="gobyMore">更多<img width="12px" src="../assets/img/bzsc/toRight.png" /></div>
          </div>
        </van-cell>
  </div>
</template>
<script>
import { Cell, Button } from 'vant'
export default {
    components: {
    [Cell.name]: Cell,
    [Button.name]: Button,
  },
  name: 'titlePanel',
  props: {
    title: {
      type: String,
      default: '基础信息'
    },
    colors: {
      type: String,
      default: '#00B8B6'
    },
    aadFlag: {
      type: Boolean,
      default: false
    },
    moreShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      active: this.defaultActive
    }
  },
  methods: {
    gobyMore() {
      if(this.$parent.jumpMore){
        this.$parent.jumpMore() 
      }
            
    },
    handleChange(value) {
      this.$emit('change', value)
    },
    addItem() {
      this.$emit('addItem')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.content{
    background-color: transparent;
    padding: 10px 0;
}
.flex{
    align-items: center;
}
.fangK{
    width: 4px;
    height: 14px;
    margin-right: 10px;
    margin-top: -2px;
    border-radius: 1px;
}
::v-deep .van-icon-plus{
    font-size: 0.1em;
}
.addbtn{
    width: 60px;
    height: 28px;
    font-size: 12px;
    padding: 0;
    margin-right: 12px;
    background-color: transparent;
}
::v-deep .van-cell{
    border: none!important;
}
</style>
